import './index.css'
import img1 from '../../image/1.png'
import img2 from '../../image/2.png'
import img3 from '../../image/3.png'
import img4 from '../../image/4.png'
import img5 from '../../image/5.png'
import img6 from '../../image/6.png'
import img7 from '../../image/7.png'
import img8 from '../../image/auth_dialog_zh-CN.jpg'
import tool1 from '../../image/tool1.png'
import tool2 from '../../image/tool2.png'
import tool3 from '../../image/tool3.png'
import tool4 from '../../image/tool4.png'
import tool5 from '../../image/tool5.png'
import tool6 from '../../image/tool6.png'
import tool7 from '../../image/tool7.png'
import tool8 from '../../image/tool8.png'
import tool9 from '../../image/tool9.png'
import React,{useState} from 'react';
import { Button, Modal,Menu, Input,Avatar , Layout, theme , Empty , Carousel ,  } from 'antd';
import { DownOutlined, BellOutlined, DesktopOutlined, AppstoreOutlined, SettingOutlined,MenuOutlined,SearchOutlined,BarChartOutlined,SnippetsOutlined
} from '@ant-design/icons';

  const { Sider,Content,Item } = Layout;
let Home = () => {
const items = [
{
    label: '模板素材',
    key: 'mbcc',
    icon: <DownOutlined />,
     children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          {
            label: 'Option 1',
            key: 'setting:1',
          },
          {
            label: 'Option 2',
            key: 'setting:2',
          },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          {
            label: 'Option 3',
            key: 'setting:3',
          },
          {
            label: 'Option 4',
            key: 'setting:4',
          },
        ],
      },
    ],
  },
  {
    label: '设计场景',
    key: 'mail',
    icon: <DownOutlined />,
     children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          {
            label: 'Option 1',
            key: 'setting:1',
          },
          {
            label: 'Option 2',
            key: 'setting:2',
          },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          {
            label: 'Option 3',
            key: 'setting:3',
          },
          {
            label: 'Option 4',
            key: 'setting:4',
          },
        ],
      },
    ],
  },
  {
    label: '资源教程',
    key: 'app',
    icon: <AppstoreOutlined />,
     children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          {
            label: 'Option 1',
            key: 'setting:1',
          },
          {
            label: 'Option 2',
            key: 'setting:2',
          },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          {
            label: 'Option 3',
            key: 'setting:3',
          },
          {
            label: 'Option 4',
            key: 'setting:4',
          },
        ],
      },
    ],
  },
  {
    label: '订阅方案',
    key: 'SubMenu',
    icon: <SettingOutlined />,
    children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          {
            label: 'Option 1',
            key: 'setting:1',
          },
          {
            label: 'Option 2',
            key: 'setting:2',
          },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          {
            label: 'Option 3',
            key: 'setting:3',
          },
          {
            label: 'Option 4',
            key: 'setting:4',
          },
        ],
      },
    ],
  },
  {
    key: 'alipay',
    label:'可画AI'
  },
  {
  
    label:'客户端'
  }
];
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
    }


  const [isModalOpen, setIsModalOpen] = useState(false);
//顶部登录弹框
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

   const [current, setCurrent] = useState('mail');
  const onClick = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
    };
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
       //中间tab切换数据
    const [currentId, setCurrentId] = useState(1)
  const options = [
    { label: "精选推荐", id: 1 },
    { label: "文档", id: 2 },
    { label: "白板", id: 3 },
    { label: "演示文稿", id: 4 },
    { label: "社交媒体", id: 5 },
    { label: "视频", id: 6 },
    { label: "平面物料", id: 7 },
    { label: "网站", id: 8 },
    { label: "更多", id: 9 },
  ]
   const [currentId1, setCurrentId1] = useState(1)
    //侧面tab切换数据
    const options1 = [
    { label: "首页", id: 1 },
    { label: "项目", id: 2 },
    { label: "模版中心", id: 3 },
    { label: "品牌", id: 4 },
  ]
  const changeId = (id) => {
    setCurrentId(id)
  }
    const changeId1 = (id) => {
    setCurrentId1(id)
  }
  const canvaty=()=>{
   window.location.href='#/canvas'
  }
    return (
        <div className="box">
            <header>
                <MenuOutlined  onClick={() => setCollapsed(!collapsed)} className='leftb' />
          <img src='https://static.canva.cn/web/images/e1787d84651689b6f20de2ebd8d86baf.svg'  />
          <div className='drop-down'>
            <Menu className='Menu' onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
          </div>
          <div className='search'>
            <DesktopOutlined className='l1' />
                    <SettingOutlined className='l1' />
                    <BellOutlined className='l1' />
          </div>
          <div className='dlzc'>
           <Button className='zcym'onClick={showModal} >创建设计</Button>
          </div>
<Modal  className='Modal' open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width="400px" footer={null}>
                    <Input prefix={<SearchOutlined />} placeholder="Basic usage" />
                    <p style={{ fontSize: '13px' }}>推荐设计类型</p>
            <div className='diocr'>
              <SnippetsOutlined />
              <span style={{marginLeft:'10px'}}>文档</span>
            </div>
            <div className='diocr'>
              <SnippetsOutlined />
               <span style={{marginLeft:'10px'}}>白板</span>
            </div>
            <div className='diocr'>
              <SnippetsOutlined />
              <span style={{marginLeft:'10px'}}>演示文稿</span>
            </div>
            <div className='diocr' onClick={canvaty}>
              <SnippetsOutlined />
               <span style={{marginLeft:'10px'}}>海报(竖版)</span>
            </div>
            <div className='diocr'>
              <SnippetsOutlined />
              <span style={{marginLeft:'10px'}}>简历</span>
            </div>
        

                </Modal>
                <Avatar className='txAv' size="large" icon={<SearchOutlined />} />
          </header>
            <main>
                <Layout style={{minHeight: '100vh'}}>
                 <Sider className='Sider' collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                        {options1.map((item) => {
                          return (
                            <div  key={item.id} onClick={() => changeId1(item.id)} className={item.id == currentId1 ? "active" : ""}>
                                 <Button style={{ width: '100%' }}>{item.label}</Button>
                            </div>
          )
        })}
                  </Sider>
            <Layout>
              <Content style={{ margin: '0 16px', background: '#fff' }}>
                     <div style={{ height: 100}}>
                          <div style={{ display: currentId1 == 1 ? "block" : "none" }}>                                
                              
                             <div className='topqw'>
                                        <Button className='Button1' ghost>自定义大小</Button>
                                        <Button className='Button2' ghost>上传</Button>
                                        <p className='jtty'>今天你想设计什么？</p>
                                        <Input className='sskk' placeholder="Basic usage" prefix={<SearchOutlined />} />
                                    <div className='tabqh'>
                                          {/* Tab栏 */}
                                     {options.map((item) => {
                                        return (
                                        <div  key={item.id} onClick={() => changeId(item.id)} className={item.id == currentId ? "active" : ""}>
                                        <div style={{ width: '50px', height: '50px', background: '#fff', borderRadius: "50%" }}>
                                        <BarChartOutlined className='barchar' />
                                        </div>
                                        <span style={{ color: '#fff' }}>{item.label}</span>
                                    </div>
          )
                                     })}</div>
                      {/* 中间内容区域 */}
                      <div style={{ height: 1000}}>
                                    <div style={{ display: currentId == 1 ? "block" : "none" }}>
                                    
                                    <div className='try'>
                                <h2>你可能想尝试...</h2>
                                    <Carousel arrows infinite={false}>
                                     <div>
                                        <div className='imagetext'>
                                               <img style={{width:'200px',height:'150px'}} src={img1} />
                                                  <p className='ztjc'>网站</p>
                                       </div>
                                       <div className='imagetext'>
                                               <img src={img2} style={{width:'200px',height:'150px'}} />
                                                <p className='ztjc'>网站</p>
                                       </div>
                                        <div className='imagetext'>
                                               <img src={img3} style={{width:'200px',height:'150px'}} />
                                                 <p className='ztjc'>网站</p>
                                        </div>
                                       <div className='imagetext'>
                                             <img src={img4} style={{width:'200px',height:'150px'}} />
                                    <p className='ztjc'>网站</p>
                                        </div>
                                        <div className='imagetext'>
                                    <img src={img8} style={{width:'200px',height:'150px'}} />
                                    <p className='ztjc'>网站</p>
                                </div>
                                    </div>
                                    <div>
                                                                    <div className='imagetext'>
                                    <img src={img5} style={{width:'200px',height:'150px'}} />
                                    <p className='ztjc'>网站</p>
                                        </div>
                                        <div className='imagetext'>
                                    <img src={img6} style={{width:'200px',height:'150px'}} />
                                    <p className='ztjc'>网站</p>
                                </div>
                                <div className='imagetext'>
                                    <img src={img7} style={{width:'200px',height:'150px'}} />
                                    <p className='ztjc'>网站</p>
                                </div>
                                    </div>
    </Carousel>
                            </div>

                          <div className='tool'>
                                <h2>值得一试的热门工具</h2>
                                 <Carousel arrows infinite={false}>
      <div>

                                    <img src={tool1} />
                                    <img src={tool2} />
                                    <img src={tool3} />
                                    <img src={tool4} />
                                    <img src={tool5} />
                                    </div>
                                    <div>
                                    <img src={tool6} />
                                    <img src={tool7} />
                                    <img src={tool8} />
                                    <img src={tool9} />
                                    </div>
    </Carousel>
                                        </div>
                                        
                                        <div className='kztty'>
                                            <h2>最近的设计</h2>
                                             <Empty />
                                        </div>
                                    </div>
        <div style={{ display: currentId == 2 ? "block" : "none" }}>内容二</div>
        <div style={{ display: currentId == 3 ? "block" : "none" }}>内容三</div>
        <div style={{ display: currentId == 4 ? "block" : "none" }}>内容四</div>
        <div style={{ display: currentId == 5 ? "block" : "none" }}>内容五</div>
        <div style={{ display: currentId == 6 ? "block" : "none" }}>内容六</div>
        <div style={{ display: currentId == 7 ? "block" : "none" }}>内容七</div>
        <div style={{ display: currentId == 8 ? "block" : "none" }}>内容八</div>
        <div style={{ display: currentId == 9 ? "block" : "none" }}>内容九</div>
                        </div>
                       
                            </div>   
                  
                </div>
        <div style={{ display: currentId1 == 2 ? "block" : "none" }}>内容77888</div>
        <div style={{ display: currentId1 == 3 ? "block" : "none" }}>内容三</div>
        <div style={{ display: currentId1 == 4 ? "block" : "none" }}>内容四</div>
      </div>
                     
            </Content>
            </Layout>
      
    </Layout>
        
        {/* <div className='cjsjtk'>
      
        </div> */}
        
        </main>
        
        </div>
)
}

export default Home